<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Meteora.Selection</title>
    
    <script src="../../src/meteora.js" type="text/javascript"></script>
    
    <link type="text/css" rel="stylesheet" href="../css/test.css" />
    <style type="text/css">
      #selection-area, #drop-area-1, #drop-area-2 {
        border: 1px solid #DED93E;
        background: #FFFEE0; 
        padding: 5px;
        overflow: auto;
        display: block;
      }
      .test-item {
        padding: 4px;
        border: 1px solid #eee;
        background: #fff;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Meteora.Selection</h1>

    <table>
      <tr>
        <td>
          <div class="instructions">
            Use your mouse to click and draw a rectangle around any items from the area below.
          </div>

          <h3>Selection area</h3>
          <div id="selection-area">
            <img id="img_0" class="test-item" src="../media/images/img_0.jpg" />
            <img id="img_1" class="test-item" src="../media/images/img_1.jpg" />
            <img id="img_2" class="test-item" src="../media/images/img_2.jpg" />
            <img id="img_3" class="test-item" src="../media/images/img_3.jpg" />
            <img id="img_4" class="test-item" src="../media/images/img_4.jpg" />
            <img id="img_5" class="test-item" src="../media/images/img_5.jpg" />
            <img id="img_6" class="test-item" src="../media/images/img_6.jpg" />
            <img id="img_7" class="test-item" src="../media/images/img_7.jpg" />
            <img id="img_8" class="test-item" src="../media/images/img_8.jpg" />
            <img id="img_9" class="test-item" src="../media/images/img_9.jpg" />
          </div>
        </td>
        <td style="width: 40%">
          <div class="instructions">
            Drop the items you selected in any of the two areas below.
          </div>
          
          <h3>Drop area 1</h3>
          <div id="drop-area-1" style="height: 200px"></div>

          <h3>Drop area 2</h3>
          <div id="drop-area-2" style="height: 200px"></div>
        </td>
      </tr>
    </table>

    <script type="text/javascript">
      
      Meteora.showDebug(true);

      Meteora.uses('Meteora.Selection');

      Meteora.onStart(
        function() {
          new Selection(
            {
              itemClass: 'test-item',
              dropArea: [ 'drop-area-1', 'drop-area-2' ],
              selectionArea: 'selection-area',
              onDrop: function(items, dropArea) {
                for (var i = 0; i < items.length; i++) {
                  dropArea.appendChild(items[i]);
                  items[i].setStyles({
                    'position': '',
                    'left': '',
                    'top': ''
                  });
                  log('You dropped the element with id: '+items[i].id+' within the drop area: '+dropArea.id);
                }
              }
            }
          ); 
        }
      );
    </script>


  </body>
</html>
